<template>
	<view class="page__bd">
		<scroll-view scroll-x="true" class="bg-white hb-nav text-center">
			<view class="hb-item" :class="index==tabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="onTabSelected"
			 :data-id="index">
				{{tabNav[index]}}
			</view>
		</scroll-view>
		<block v-if="tabCur==0">
			<view class="hb-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="hb-icon_title text-blue"></text>
					固定尺寸
				</view>
			</view>
			<view class="padding bg-white">
				<view class="flex flex-wrap">
					<view class="basis-xs bg-grey margin-xs padding-sm radius">xs(20%)</view>
					<view class="basis-df"></view>
					<view class="basis-sm bg-grey margin-xs padding-sm radius">sm(40%)</view>
					<view class="basis-df"></view>
					<view class="basis-df bg-grey margin-xs padding-sm radius">sub(50%)</view>
					<view class="basis-lg bg-grey margin-xs padding-sm radius">lg(60%)</view>
					<view class="basis-xl bg-grey margin-xs padding-sm radius">xl(80%)</view>
					<view class="basis-full bg-grey margin-xs padding-sm radius">full(100%)</view>
				</view>
			</view>
			<view class="hb-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="hb-icon_title text-blue"></text>
					比例布局
				</view>
			</view>
			<view class="padding bg-white">
				<view class="flex">
					<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
					<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
				</view>
				<view class="flex  p-xs margin-bottom-sm mb-sm">
					<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
					<view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
				</view>
				<view class="flex  p-xs margin-bottom-sm mb-sm">
					<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
					<view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
					<view class="flex-treble bg-grey padding-sm margin-xs radius">3</view>
				</view>
			</view>
			<view class="hb-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="hb-icon_title text-blue"></text>
					水平对齐(justify)
				</view>
			</view>
			<view class="bg-white">
				<view class="flex solid-bottom padding-sm justify-start">
					<view class="bg-grey padding-sm margin-xs radius">start</view>
					<view class="bg-grey padding-sm margin-xs radius">start</view>
				</view>
				<view class="flex solid-bottom padding-sm justify-end">
					<view class="bg-grey padding-sm margin-xs radius">end</view>
					<view class="bg-grey padding-sm margin-xs radius">end</view>
				</view>
				<view class="flex solid-bottom padding-sm justify-center">
					<view class="bg-grey padding-sm margin-xs radius">center</view>
					<view class="bg-grey padding-sm margin-xs radius">center</view>
				</view>
				<view class="flex solid-bottom padding-sm justify-between">
					<view class="bg-grey padding-sm margin-xs radius">
						between
					</view>
					<view class="bg-grey padding-sm margin-xs radius">
						between
					</view>
				</view>
				<view class="flex padding-sm justify-around">
					<view class="bg-grey padding-sm margin-xs radius">
						around
					</view>
					<view class="bg-grey padding-sm margin-xs radius">
						around
					</view>
				</view>
			</view>
			<view class="hb-bar bg-white solid-bottom margin-top">
				<view class="action"><text class="hb-icon_title text-blue"></text>
					垂直对齐(align)</view>
			</view>
			<view class="bg-white">
				<view class="flex solid-bottom padding align-start">
					<view class="bg-grey padding-lg margin-xs radius">瀚</view>
					<view class="bg-grey padding-sm margin-xs radius">start</view>
				</view>
				<view class="flex solid-bottom padding align-end">
					<view class="bg-grey padding-lg margin-xs radius">瀚</view>
					<view class="bg-grey padding-sm margin-xs radius">end</view>
				</view>
				<view class="flex solid-bottom padding align-center">
					<view class="bg-grey padding-lg margin-xs radius">瀚</view>
					<view class="bg-grey padding-sm margin-xs radius">center</view>
				</view>
				<view class="flex solid-bottom padding align-stretch">
					<view class="bg-grey padding-lg margin-xs radius">瀚</view>
					<view class="bg-grey padding-sm margin-xs radius">stretch</view>
				</view>

			</view>
			<view class="hb-bar bg-white solid-bottom margin-top">
				<view class="action"><text class="hb-icon_title text-blue"></text>
					垂直居中对齐(align-justify)</view>
			</view>
			<view class="bg-white">
				<view class="flex solid-bottom padding vertical-center">
					<view class="bg-grey padding-lg margin-xs radius">瀚</view>
				</view>
			</view>
		</block>
		<block v-if="tabCur==1">
			<view class="hb-bar bg-white solid-bottom margin-top">
				<view class="action"><text class="hb-icon_title text-blue"></text>等分列</view>
			</view>
			<view class="bg-white padding">
				<view class="grid margin-bottom text-center" v-for="(item,index) in 5" :key="index" :class="'col-' + (index+1)">
					<view class="padding" :class="indexs%2==0?'bg-light_blue':'bg-blue'" v-for="(item,indexs) in (index+1)*2" :key="indexs">{{indexs+1}}</view>
				</view>
			</view>
			<view class="hb-bar bg-white solid-bottom margin-top">
				<view class="action"><text class="hb-icon_title text-blue"></text>等高</view>
			</view>
			<view class="bg-white padding">
				<view class="grid col-4 grid-square">
					<view class="bg-img" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
				</view>
			</view>
		</block>
		<block v-if="tabCur==2">
			<view class="hb-bar  bg-white solid-bottom margin-top">
				<view class="action"><text class="hb-icon_title text-blue"></text>浮动</view>
			</view>
			<view class="bg-white padding">
				<view class="clearfix padding-sm">
					<view class="bg-grey radius fl padding-sm">瀚</view>
					<view class="bg-grey radius fr padding-sm">邦</view>
				</view>
			</view>
			<view class="hb-bar bg-white solid-bottom margin-top">
				<view class="action"><text class="hb-icon_title text-blue"></text>内外边距</view>
			</view>
			<view class="padding bg-white">{size}的尺寸有：<text class="text-red">xs(10upx)/sm(20upx)/df(30upx)/lg(40upx)/xl(50upx)</text></view>
			<view class="padding bg-white solid-top">注意：<text class="text-red">df为默认尺寸，书写：padding,不需要加上padding-df</text></view>
			<view class="flex flex-wrap padding solid-top bg-white">
				<view class="basis-df padding-bottom-xs">外边距</view>
				<view class="basis-df padding-bottom-xs">内边距</view>
				<view class="basis-df">.margin-{size}</view>
				<view class="basis-df">.padding-{size}</view>
			</view>
			<view class="flex flex-wrap padding solid-top bg-white">
				<view class="basis-df padding-bottom-xs">水平方向外边距</view>
				<view class="basis-df padding-bottom-xs">水平方向内边距</view>
				<view class="basis-df">.margin-lr-{size}</view>
				<view class="basis-df">.padding-lr-{size}</view>
			</view>
			<view class="flex flex-wrap padding solid-top bg-white">
				<view class="basis-df padding-bottom-xs">垂直方向外边距</view>
				<view class="basis-df padding-bottom-xs">垂直方向内边距</view>
				<view class="basis-df">.margin-tb-{size}</view>
				<view class="basis-df">.padding-tb-{size}</view>
			</view>
			<view class="flex flex-wrap padding solid-top bg-white">
				<view class="basis-df padding-bottom-xs">上外边距</view>
				<view class="basis-df padding-bottom-xs">上内边距</view>
				<view class="basis-df">.margin-top-{size}</view>
				<view class="basis-df">.padding-top-{size}</view>
			</view>
			<view class="flex flex-wrap padding solid-top bg-white">
				<view class="basis-df padding-bottom-xs">右外边距</view>
				<view class="basis-df padding-bottom-xs">右内边距</view>
				<view class="basis-df">.margin-right-{size}</view>
				<view class="basis-df">.padding-right-{size}</view>
			</view>
			<view class="flex flex-wrap padding solid-top bg-white">
				<view class="basis-df padding-bottom-xs">下外边距</view>
				<view class="basis-df padding-bottom-xs">下内边距</view>
				<view class="basis-df">margin-bottom-{size}</view>
				<view class="basis-df">.padding-bottom-{size}</view>
			</view>
			<view class="flex flex-wrap padding solid-top bg-white">
				<view class="basis-df padding-bottom-xs">左外边距</view>
				<view class="basis-df padding-bottom-xs">左内边距</view>
				<view class="basis-df">.margin-left-{size}</view>
				<view class="basis-df">.padding-left-{size}</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCur: 0,
				tabNav: ['Flex布局', 'Grid布局', '辅助布局'],
				avatar: [
					'https://img.18183.com/uploads/allimg/191031/266-191031164046.jpg',
					'https://img.18183.com/uploads/allimg/181114/216-1Q114163524.jpg',
					'https://img.18183.com/uploads/allimg/190219/237-1Z21Z94014954.png',
					'https://img.18183.com/uploads/allimg/181229/237-1Q2291H404N0.jpg'
				]
			}
		},
		methods: {
			onTabSelected(e) {
				this.tabCur = e.currentTarget.dataset.id;
			}
		}
	}
</script>

<style>
</style>
